<template>
  <div
    class="SceneryPoint_back"
    :style="{'background-image':`url(${getImageUrl(info_data?.src_id)})`}"
  >
    <dv-border-box11 :title="info_data?.DIM_SPOT" :title-width="400" :animate="false">
      <!-- <div class="box1">
      <div class="box1_title">
        <div small-bg>
          <dv-decoration-11 style="width:400px;height:60px;">
            <div color-green font-600 bg="~ dark/0">
              <h1>{{ info_data?.DIM_SPOT }}</h1>
            </div>
          </dv-decoration-11>
        </div>
      </div>
      </div>-->
      <div class="footer_box">
        <div class="box2">
          <div class="box2_item1">
            <!-- <div class="card_box"> -->

            <CardInfo :city_id_list="city_id_list" :info_data="info_data" />
            <!-- </div> -->
            <!-- <dv-border-box13> -->
            <!-- </dv-border-box13> -->
            <!-- <div class="card_box">
              <div class="card_title">
                {{ info_data?.DIM_SPOT }}
              </div>
              <div class="card_item">
                ip属地：
                <span
                  class="item_info"
                >{{ info_data?.PROVINCE? info_data?.PROVINCE: info_data?.PROVICNE }}</span>
              </div>
              <div class="card_item">
                详细地址：
                <span class="item_info">{{ info_data?.LOCATION }}</span>
              </div>
              <div class="open_time">
                <span class="info_title"></span>
                <div class="time_info">{{ info_data?.OPENTIME }}</div>
              </div>
            </div>-->
          </div>
          <dv-border-box10 class="box2_item2">
            <!-- <div class="box2_item2"> -->
            <FacilitiesList :city_id_list="city_id_list" />
            <!-- </div> -->
          </dv-border-box10>
        </div>
        <div class="box3">
          <div class="box3_item1">
            <div class="box3_item_bxo1">
              <!-- <div class="Scenery_box">
              <h1 class="title">等级</h1>
              <p class="info">
                <el-rate
                  :texts="['超级差', '差', '一般', '良', '优秀']"
                  show-text
                  disabled
                  show-score
                  text-color="#A31127"
                  score-template="{value} 分"
                  v-if="rate_list_fire"
                  v-model="rate_list_fire"
                  allow-half
                />
                <el-rate
                  :texts="['超级差', '差', '一般', '良', '优秀']"
                  show-text
                  disabled
                  show-score
                  score-template="{value} 分"
                  v-else-if="rate_list"
                  v-model="rate_list"
                  allow-half
                />
              </p>
            </div>
            <div class="Scenery_box">
              <h1 class="title">热度：</h1>
              <p class="info">{{ info_data?.HOT ? info_data?.HOT : '0' }}条</p>
            </div>
            <div class="Scenery_box">
              <h1 class="title">总评论数据：</h1>
              <p class="info">{{ info_data?.SUM }}条</p>
              </div>-->
              <StatisticView2 :city_id_list="city_id_list" :info_data="info_data" />
              <CommentList2 :city_id_list="city_id_list" />
              <div class="gauge_box">
                <dv-border-box10 class="gauge_box_item">
                  <h3>好评</h3>
                  <GaugeView3 :city_id_list="city_id_list" :good_select="'好评'" />
                </dv-border-box10>
                <dv-border-box10 class="gauge_box_item">
                  <h3>差评</h3>
                  <GaugeView4 :city_id_list="city_id_list" :good_select="'好2评'" />
                </dv-border-box10>
              </div>
            </div>
          </div>
          <dv-border-box12 class="box3_item2">
            <Attractions :city_id_list="city_id_list" />
          </dv-border-box12>
        </div>
      </div>
      <!-- <div class="SceneryPoint"> -->
      <!-- <div class="affix1_box">
        <el-tabs v-model="activeName" type="card" class="demo-tabs">
          <el-tab-pane label="基础服务" name="first">
            <FacilitiesList :city_id_list="city_id_list" />
          </el-tab-pane>
          <el-tab-pane label="优惠政策" name="second">
            <Policy :city_id_list="city_id_list" />
          </el-tab-pane>
          <el-tab-pane label="附近景点推荐" name="third">
            <Attractions :city_id_list="city_id_list" />
          </el-tab-pane>
          <el-tab-pane label="评论列表" name="fourth">
            <CommentList :city_id_list="city_id_list" />
          </el-tab-pane>
        </el-tabs>
      </div>-->

      <!-- <el-form-item label="数组" prop="age">
      <el-input v-model.number="ruleForm.user" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
      </el-form-item>-->
      <!-- 景点分析         -->
      <!-- {{ info_data }} -->
      <!-- <Scenery_info :info_data="info_data" /> -->
      <!-- <Scenery_info :info_data="info_data" /> -->
      <!-- <FacilitiesList :name="name" :icon_data="icon_data" /> -->
      <!-- </div> -->
      <!-- <el-affix position="top" :offset="90">
      <div class="right_box">
        <div class="affix2_box">
          <div class="btn btn--huge" @click="go_comment(info_data)">
            <div class="btn--huge__text">
              <div>
                点击跳转评论列表
                <span>点击跳转评论列表</span>
              </div>
            </div>
          </div>
        </div>
        <dv-border-box-10>
          <h2>印象词前五 Top 5</h2>
          <div class="affix2_box_info1">
            <GaugeView3 :city_id_list="city_id_list" />
          </div>
        </dv-border-box-10>
      </div>
      </el-affix>-->
    </dv-border-box11>
  </div>
</template> 
  
<script setup lang="ts">


import { BorderBox12 as DvBorderBox12 } from '@kjgl77/datav-vue3'
import { BorderBox11 as DvBorderBox11 } from '@kjgl77/datav-vue3'
import { BorderBox13 as DvBorderBox13 } from '@kjgl77/datav-vue3'
import useImageUrl from "@/Hook/useImageUrl";
import { storeToRefs } from "pinia";
import { menuStore } from "@/store/modules/menu";
const menulist = menuStore();
let { city_id, default_city } = storeToRefs(menulist);
let route = useRoute();
let router = useRouter();
const rate_list = ref(1);
const rate_list_fire = ref(1);
let info_data = ref(null);
let city_id_list = ref(null);
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const getdata = async () => {
  if (route.query.id) {
    // console.log(city_id.value);
    info_data.value = city_id.value;
    city_id_list.value = route.query.id;
    
    console.log("路由传值info_data",info_data.value);
  } else {
    info_data.value = default_city.value;
    city_id_list.value = info_data.value.SPOT_ID?info_data.value.SPOT_ID:info_data.value.DIM_SPOT_ID;
    // console.log(info_data.value);
    console.log("默认传值info_data",info_data.value);
  }
};
onMounted(() => {
  getdata();
});

menulist.$subscribe((arg, state) => {  //需要写在数据变化前面
    console.log('subscribe=========================', arg, state)
    getdata()
})
const go_comment = (item: any) => {
  menulist.city_id = item;
  router.push({
    path: "/ReView",
    query: {
      id:item.SPOT_ID?item.SPOT_ID:item.DIM_SPOT_ID
    }
  });

  // console.log(city_id.value);
};
// onUnmounted(() => {
//   console.log("efadfas");

//   if (city_id.value) {
//     menulist.city_id = "";
//   }
// });
watch(
  () => route.query.id,
  newRoute => {
    getdata();
  }
);

const getImageUrl = (item: any) => {
  return useImageUrl("cardimg", item, "png");
};
// let name = ref("父组件");
// let icon_data = ref([]);
// import type { FormInstance, FormRules } from 'element-plus'

// const ruleFormRef = ref<FormInstance>()

// const ruleForm = reactive({
//   user: '',
// })

// const submitForm = (formEl: FormInstance | undefined) => {

//       console.log(ruleForm.user)
//       console.log(name.value);

//       name.value = ruleForm

// }

// const resetForm = (formEl: FormInstance | undefined) => {
//   if (!formEl) return
//   formEl.resetFields()
// }
</script>
  
  <style lang="scss" scoped>
.SceneryPoint_back {
  // margin-top: 70px;
  // height: 100%;
  // background-color: #27df02;
  height: calc(100vh - 57px);
  display: flex;
  // flex-direction: column;
  justify-content: center;
  background-size: cover;
  // background-repeat: no-repeat;
  overflow: hidden;
  .footer_box {
    width: 97%;
    padding-left: 28px;
    padding-top: 60px;
    height: 91%;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 20px;
    // background-color: aqua;
    .box2 {
      flex: 1;
      // background-color: aqua;
      width: 100%;
      height: 100%;
      // gap: 10px;
      // line-height: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .box2_item1 {
        width: 95%;
        height: 50%;
        margin-top: -10%;
        overflow: hidden;
        // margin: 0 auto;
        // display: flex;
        // justify-content: center;
        // text-align: center;
        // background-color: rgb(252, 152, 21);
        // overflow-y: scroll;
        // border: 5px solid rgb(19, 195, 207);
        // padding-top: 20px;
        // padding-left: 20px;
        // background-color: rgb(0, 255, 85);
      }
      .box2_item2 {
        background-color: rgba(231, 228, 228, 0.7);
        margin-top: 10px;
        padding-top: 10px;
        // padding-left: 5px;
        width: 90%;
        height: 46%;
        // border: 5px solid rgb(19, 195, 207);
        overflow: hidden;
        // background-color: rgb(78, 112, 89);
      }
    }
    .box3 {
      flex: 2;
      width: 90%;
      height: 100%;
      // background-color: aqua;
      display: flex;
      flex-direction: row;
      .box3_item1 {
        width: 90%;
        height: 100%;
        flex: 2;
        // border: 5px solid rgb(19, 195, 207);
        // background-color: rgb(57, 58, 58);
        display: flex;
        flex-direction: column;
        // justify-content: space-around;
        // gap: 10px;
        .box3_item_bxo1 {
          width: 90%;
          display: flex;
          flex-direction: column;
          // margin: 0 auto;
          height: 100%;
          overflow: hidden;
          // background-color: rgb(89, 116, 116);
          // border: 5px solid rgb(19, 195, 207);
          .gauge_box {
            width: 100%;
            height: 100%;
            .gauge_box_item {
              h3 {
                color: black;
              }
              text-align: center;
              height: 90%;
              width: 50%;
              background-color: rgba(255, 255, 255, 0.7);
              overflow: hidden;
            }
            // height: 400px;
            // background-color: aqua;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          }
        }
      }
      .box3_item2 {
        // margin-left: 30px;
        flex: 1;
        width: 90%;
        height: 96%;
        // background-color: rgb(89, 116, 116);
        overflow: hidden;
        // border: 5px solid rgb(19, 195, 207);
      }
    }
  }
}
</style>